<template>
  <div>
  <Row>
    <i-col span="24"  class-name="y_query_right">
      <Button :type="param.operation==0?'primary':'error'"
              :disabled="param.selection.length<=0" :icon="param.operation==0?'md-add':'md-trash'"
              class="y_condition" @click="batchOperation"
              >
        {{param.operation==0?'添加到当前分类':'从当前分类删除'}}
      </Button>
    </i-col>
</Row>
  <hr>
  <Row>
    <i-col span="24" :class-name="isMobile()?'y_query_right':'query_condition'">
      <Cascader :data="categoryList" @on-change="classificationChange"
                :class="isMobile()?'y_condition':'class_tree'" style="text-align: left;"
                :clearable=false
                placeholder="请先选择产品分类 (*必选)"></Cascader>
      <Input placeholder="产品编号 (可选)"  :class="isMobile()?'y_condition':'product_code_input'" v-show="param.selectedClassification !== ''" v-model="param.productCode" clearable></Input>
      <Input placeholder="产品名关键字（可选）"  :class="isMobile()?'y_condition':'product_code_input'"
             v-model="param.productName" clearable v-show="param.selectedClassification !== ''"></Input>
      <Select placeholder="请选择产品状态" :class="isMobile()?'y_condition':'product_class_state'"
        style="text-align: left;" clearable v-show="param.selectedClassification !== ''" v-model="param.state">
        <Option value="0">已上架</Option>
        <Option value="-1">已下架</Option>
        <Option value="3">未上架</Option>
        <Option value="-2">回收站</Option>
      </Select>
      <div :class="isMobile()?'y_condition_1':'product_class_state'" v-show="param.selectedClassification !== ''">
        状态 : &nbsp;&nbsp;
        <RadioGroup v-model="param.operation" @on-change="changeOperation">
          <Radio label="0" ><span>未在当前分类</span></Radio>
          <Radio label="-1"><span>已在当前分类</span></Radio>
        </RadioGroup>
      </div>
      <Button type="primary" icon="md-search" :class="isMobile()?'y_condition':''" @click="webList">
        查询
      </Button>
    </i-col>

  </Row>

    <Row>
      <div class="tip_div"  v-show="productList.length === 0">
        <strong>操作提示 :  </strong>
        <br><br>
        <p>1. 根据分类等条件查询出产品</p>
        <p>2. 选择产品后,可以将选中的产品批量添加到当前选择的分类 或者 从当前分类批量移除选中的产品</p>
      </div>
    </Row>


<div  v-show="productList.length !== 0">

  <!--表格和分页-->
<!--  <Table stripe border class="base_table"-->
<!--         :columns="tableTitles" :data="productList"-->
<!--         no-data-text="暂无数据" @on-sort-change="productSortChanged"-->
<!--         @on-selection-change="productSelectedChanged"-->
<!--         v-show="productList.length !== 0"-->
<!--  ></Table>-->
  <List style="border-bottom: 1px solid #e8eaec;margin-top: 1rem;margin-bottom: 1rem;">
    <ListItem style="display: flex;align-items: flex-start;margin-left: 1rem;">
      <Checkbox v-model="isCheckedAllMessage" @on-change="handleCheckAll">全选</Checkbox>
    </ListItem>
    <CheckboxGroup v-model="param.selection" @on-change="checkChange">
      <list-item class="list_item" v-for="(item,index) in productList">
        <div style="width:100%;padding: 0 0.5rem;"  >
          <Row type="flex" justify="space-between" align="middle">
            <i-col :xs="2" :sm="1" >
              <Checkbox :label="item" :value="index">{{ check }}</Checkbox>
            </i-col>
            <i-col  :xs="5" :sm="2" style="text-align: left">
              <img :src="item.productImg"
                   style="width:99%;max-width:100px;max-height:100px;"
                   @click="status.modalImage.url=item.productImg;status.modalImage.isShow = true;"/>
            </i-col>
            <i-col :xs="17" :sm="21" style="text-align: left;padding-left: 0.5rem;" >
              <KeyValueView>#{{index+1}}</KeyValueView>
              <KeyValueView title="SKU">
                <a :href="$tiyProductUrl(item.code)" target="_blank">{{item.code}}</a>
              </KeyValueView>
              <KeyValueView title="价格">${{item.currentPrice}}</KeyValueView>
              <KeyValueView title="状态"><Tag :color="getProductState(item).color">{{getProductState(item).state}}</Tag></KeyValueView>
              <KeyValueView oneline title="创建时间" >{{ $tiyBJTime(item.createtime) }}</KeyValueView>
              <KeyValueView oneline title="产品名">{{item.name}}</KeyValueView>
            </i-col>
          </Row>
        </div>
      </list-item>
    </CheckboxGroup>
  </List>

  <div style="float: right;" >
    <Page :total="page.total" :page-size="page.stepNumber" :current="page.currentPage" @on-change="changePage"
          @on-page-size-change="sizeChange" :page-size-opts="[40,60,80,120]"
          show-sizer show-elevator/>
  </div>

</div>
  </div>
</template>

<script>
  import ICol from "../../../node_modules/view-design/src/components/grid/col";
  import tiyData from "./js/productClassification/product_classification_data";
  import {getProductCommonData, createCategoryList} from "../js/commonUtils";
  import {webList,batchOperation} from "./js/productClassification/product_classification_funs";
  import KeyValueView from "../widgets/KeyValueView";
  export default {
    components: {ICol,KeyValueView},
    data() {
      return {
        page: tiyData.tPage,
        productList: tiyData.tData.productList,
        tableTitles: [
          tiyData.tTable.tableTitles.columnSelection,
          tiyData.tTable.tableTitles.index,
          tiyData.tTable.tableTitles.columnCode,
          tiyData.tTable.tableTitles.productName,
          tiyData.tTable.tableTitles.columnImg,
          tiyData.tTable.tableTitles.columnPrice,
          tiyData.tTable.tableTitles.columnState,
          tiyData.tTable.tableTitles.columnCreateTime
        ],
        param: tiyData.tParam,
        status: tiyData.tStatus,
        yunPath: this.$store.getters.imgPrefix,
        categoryList:tiyData.tData.categoryList,//分类控件所需要的数据
        check: '',
        isCheckedAllMessage: false,
      }
    },
    computed: {

    },
    methods: {
      getProductState(product){
        let state = '';
        let color = 'green';
        switch(product.state){
          case 0:
            state = '已上架';
            break;
          case -1:
            state = '已下架';
            color='magenta';
            break;
          case -2:
            state = '回收站';
            color='cyan';
            break;
          case 3:
            state = '未上架';
            color='magenta'
            break;
          default:
            break;
        }
        return {
          "state":state,
          "color":color,
        }
      },
      checkChange() {
        if (this.param.selection.length == this.productList.length) {
          this.isCheckedAllMessage = true;
        } else {
          this.isCheckedAllMessage = false;
        }
      },
      handleCheckAll() {
        let self = this;
        self.param.selection.splice(0, self.param.selection.length);
        if (self.isCheckedAllMessage) {
          for(let i=0;i<self.productList.length;i++){
            self.param.selection.push(self.productList[i]);
          }
        }
      },
      webList(){
        this.$ySpliceAll(tiyData.tParam.selection);
        webList(this,tiyData)
      },
      changePage(page){
        tiyData.tPage.currentPage = page;
        webList(this, tiyData);
      },
      sizeChange(p){
        tiyData.tPage.stepNumber = p;
        webList(this, tiyData);
      },
      classificationChange(value, selectedData){
          if ( 0 < selectedData.length) {
            tiyData.tParam.selectedClassification = selectedData[selectedData.length - 1].value;
        } else {
            tiyData.tParam.selectedClassification = '';
        }

      },
      batchOperation(){
        batchOperation(this,tiyData);

      },

      productSelectedChanged(selection){
        tiyData.tParam.selection=selection;
      },
      changeOperation(state){
        if(tiyData.tParam.selectedClassification!=''){
          webList(this,tiyData);
        }
      },
      isMobile() {
        return this.$yMobile();
      },
      productSortChanged(column, key, order) {
          tiyData.tPage.total = 1;
          tiyData.tPage.startIndex = 0;
          tiyData.tPage.currentPage = 1;
          if ('normal' == column.order) {
              tiyData.tParam.orderBy = '';
          } else {
              tiyData.tParam.orderBy = column.key + ' ' + column.order;
          }
          webList(this, tiyData);
      },
      createCategoryList(self, categoryList){
        let classifications = this.$store.getters.product.classifications;
        categoryList.splice(0, categoryList.length);
        let level1Resource = classifications.filter(category => category.level === 1);
        let level2Resource = classifications.filter(category => category.level === 2);
        let level3Resource = classifications.filter(category => category.level === 3);

        level1Resource.forEach(function(classificationLevel1){
          if(classificationLevel1.type!=2){
            let dataLevel2 = [];
            level2Resource.filter(classification => classification.parentId == classificationLevel1.id).forEach(function (itemLevel2) {
              let dataLevel3 = [];
              level3Resource.filter(classification => classification.parentId == itemLevel2.id).forEach(function (itemLevel3) {
                dataLevel3.push({value: itemLevel3.id, label: itemLevel3.name,level:3});
              });
              dataLevel2.push({value: itemLevel2.id, label: itemLevel2.name,children: dataLevel3 ,level:2});

            });
            categoryList.push({value:classificationLevel1.id,label:classificationLevel1.name,children:dataLevel2,level:1});
          }

        }) ;
      },

    },
    created(){
        tiyData.tParam.selectedClassification = "";
        let types = [];
        types.push(3); //列表只查询分类
        getProductCommonData(this, tiyData.tData.categoryList, types, false, this.createCategoryList);

    }
  }

</script>

<style lang="less" scoped>
@import  (once,optional)  "../css/base";
  .operation_item {
    text-align: left;
    margin-right: 20px;
  }


  .query_condition {
    text-align: left;
  }

  .class_tree {
    min-width: 200px;
    width: 350px;
    display: inline-block;
  }

  .product_code_input {
    width: 250px;
  }

  .y_condition_1 {
    max-width: 300px;
    margin-right: 1rem;
    margin-top:0.5rem;
  }

  .product_class_state {
    display: inline-block;
    width: 350px;
    text-align: center;
  }

.list_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list_item:hover {
  background: @tiySectionColor;
}
</style>
